import { formatEmptyValue } from '@/utils';
import { formatterUnit, formatterUnitKw } from '@/utils/formatterUnit';
import { useIntl } from '@umijs/max';
import { isNull } from 'lodash';
import React from 'react';
import Styles from './componentsStyles.less';

type IProps = {
  stationBaseData: API.StationBaseInfo;
};
const ProjectView: React.FC<IProps> = (props) => {
  const intl = useIntl();
  const { stationBaseData } = props;
  return (
    <div style={{ height: '100%' }}>
      <div className={Styles.ProjectLine}>
        <div className={Styles.ProjectItem}>
          <div className={Styles.ProjectItemLabel}>
            {intl.formatMessage({ id: 'photovoltaic.rateStorage' })}
          </div>
          <div className={Styles.ProjectItemValue}>
            {/*储能额定容量*/}
            {formatterUnit(stationBaseData?.capacity)}
          </div>
        </div>
        <div className={Styles.ProjectItem}>
          <div className={Styles.ProjectItemLabel}>
            {intl.formatMessage({ id: 'photovoltaic.ratePower' })}
          </div>
          <div className={Styles.ProjectItemValue}>
            {/*储能额定功率*/}
            {formatterUnitKw(stationBaseData?.ratedPower)}
          </div>
        </div>
        {!isNull(stationBaseData?.energyComplex?.photovoltaicCapacity) && (
          <div className={Styles.ProjectItem}>
            <div className={Styles.ProjectItemLabel}>
              {intl.formatMessage({ id: 'photovoltaic.pvStorage' })}
            </div>
            <div className={Styles.ProjectItemValue}>
              {formatEmptyValue(stationBaseData?.energyComplex?.photovoltaicCapacity)}
              {formatEmptyValue(stationBaseData?.energyComplex?.photovoltaicCapacityUnit)}
            </div>
          </div>
        )}
        {!isNull(stationBaseData?.energyComplex?.chargingPointCapacity) && (
          <div className={Styles.ProjectItem}>
            <div className={Styles.ProjectItemLabel}>
              {intl.formatMessage({ id: 'photovoltaic.pileStorage' })}
            </div>
            <div className={Styles.ProjectItemValue}>
              {formatEmptyValue(stationBaseData?.energyComplex?.chargingPointCapacity)}
              {formatEmptyValue(stationBaseData?.energyComplex?.chargingPointCapacityUnit)}
            </div>
          </div>
        )}
        {!isNull(stationBaseData?.energyComplex?.windPowerCapacity) && (
          <div className={Styles.ProjectItem}>
            <div className={Styles.ProjectItemLabel}>
              {intl.formatMessage({ id: 'photovoltaic.windStorage' })}
            </div>
            <div className={Styles.ProjectItemValue}>
              {formatEmptyValue(stationBaseData?.energyComplex?.windPowerCapacity)}
              {formatEmptyValue(stationBaseData?.energyComplex?.windPowerCapacityUnit)}
            </div>
          </div>
        )}
        {!isNull(stationBaseData?.energyComplex?.oilPowerCapacity) && (
          <div className={Styles.ProjectItem}>
            <div className={Styles.ProjectItemLabel}>
              {intl.formatMessage({ id: 'photovoltaic.dieselStorage' })}
            </div>
            <div className={Styles.ProjectItemValue}>
              {formatEmptyValue(stationBaseData?.energyComplex?.oilPowerCapacity)}
              {formatEmptyValue(stationBaseData?.energyComplex?.oilPowerCapacityUnit)}
            </div>
          </div>
        )}
      </div>
    </div>
  );
};
export default ProjectView;
